import { FC, useContext } from "react";
import styles from "./index.module.less";
import classNames from "classnames";
import { message } from "antd";
import {
  BigScreenContext,
  CurrentKey,
} from "@/pages/Dashboard/context/BigScreenContext";

export interface IFooterCardProps {
  title: string;
  currentKey: CurrentKey;
}

const FooterCard: FC<IFooterCardProps> = (props: IFooterCardProps) => {
  const bigScreenContext = useContext(BigScreenContext);
  const onClick = () => {
    if (props.currentKey === undefined) {
      message.warning("当前模块暂未开发");
      return;
    }
    bigScreenContext.setCurrentKey(props.currentKey);
  };

  return (
    <div
      onClick={onClick}
      className={classNames([
        styles["footer-card"],
        props.currentKey === bigScreenContext.currentKey
          ? styles["is-active"]
          : undefined,
        props.currentKey === undefined ? styles["display"] : undefined,
      ])}
    >
      <div className={styles["footer-card-body"]}></div>
      <div className={styles["content"]}>{props.title}</div>
    </div>
  );
};

export default FooterCard;
